<template>
  <div class="login-pwd-modify-wrap">

    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">旧密码</span>
        <div class="phone-con">
          <input type="password" class="phone-num" placeholder="请输入当前登录密码" maxlength="11" v-model="oldPwd"/>
        </div>
      </div>
    </div>

    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">新密码</span>
        <div class="phone-con">
          <input type="password" class="phone-num" placeholder="请设置6-16位密码" maxlength="16" v-model="newPwd1"/>
        </div>
      </div>
    </div>
    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">确认密码</span>
        <div class="phone-con phone-dist">
          <input type="password" class="phone-num" placeholder="请再次输入新密码" maxlength="16" v-model="newPwd2"/>
        </div>
      </div>
    </div>

    <div class="forget-old-pwd" @click="findPwdPage">忘记旧密码？</div>


    <button class="sure-text" type="button" @click="sureModifyPwd">确&nbsp;&nbsp;定</button>
  </div>
</template>

<script>
  import {salt} from "../../config/env";
  import md5 from 'js-md5'
  import {modifyPsw} from "../../axios/api";
  import {checkPwd} from "../../config/verify";

  export default {
    data() {
      return {
        oldPwd: "",
        newPwd1: "",
        newPwd2: "",
        userMark: "",
        findPhone: this.$route.query.phone
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      checkNewPwd(pwd) {//校验密码
        if (pwd == "") {
          this.$vux.toast.text("新密码不能为空", "middle");
          return;
        } else if (pwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("新密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(pwd)) {
          this.$vux.toast.text("新密码不能包含中文", "middle");
          return;
        } else if (pwd.length < 6 || pwd.length > 16) {
          this.$vux.toast.text("新密码长度为6-16位", "middle");
          return;
        }
        return true;
      },
      checkConfirmPwd(newPwd, pwd) {
        if (newPwd == "") {
          this.$vux.toast.text("确认密码不能为空", "middle");
          return;
        } else if (newPwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("确认密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(newPwd)) {
          this.$vux.toast.text("确认密码不能包含中文", "middle");
          return;
        } else if (newPwd.length < 6 || newPwd.length > 16) {
          this.$vux.toast.text("确认密码长度为6-16位", "middle");
          return;
        } else if (newPwd != pwd) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      findPwdPage() {
        this.$router.push({path: "/forgetPwd", query: {"findPhone": this.findPhone}});
      },
      sureModifyPwd() {
        let oldPwd = this.oldPwd;
        let newPwd = this.newPwd1;
        if (checkPwd(oldPwd, 2) && this.checkNewPwd(newPwd) && this.checkConfirmPwd(newPwd, this.newPwd2)) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let params = {
            "sgin": this.userMark,
            "password": md5(md5(oldPwd) + salt),
            "newPsw": md5(md5(newPwd) + salt),
          };
          modifyPsw(params).then((res) => {//修改密码
            this.$vux.loading.hide();
            if (res.code == 0) {
              if (res.data == 0) {
                this.$vux.toast.text("密码修改失败，请重试", "middle");
              } else {
                this.$router.push('/login');
              }
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .login-pwd-modify-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .forget-wx-phone {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .phone-box {
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        width: 96.8%;
        border-bottom: 0.027rem solid #f2f2f2;
        .title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .phone-con {
          width: 60%;
          margin-left: 0.92rem;
          .phone-num {
            width: 100%;
            .size-color(0.427rem, #333)
          }
        }
        .phone-dist {
          margin-left: 0.493rem;
        }
      }
    }
    .forget-old-pwd {
      text-align: right;
      padding-right: 0.32rem;
      .size-color(0.373rem, rgba(60, 175, 255, 1));
      margin-top: 0.48rem;
    }
    .sure-text {
      .fj(center, center);
      margin: 1.2rem auto 0;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
  }
</style>
